<template>
	<div style="padding: 0 15px; margin-bottom: 50px;">
		<!-- 热门景点 -->
		<div class="comClass">
			<h4 class="comTitle">景点</h4>
			<img src="../assets/stop/8b2e03e8a524df79f27399beda7e8f0d.jpg" style="width: 345px;height: 160px;margin-bottom: 8px;display: block;">
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/stop/9d11fd2a91cbc2a8873d50cb7d53cbd5.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">红树林栈道</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/stop/145e35a7eed1ed1102c4fd459aebc31d.jpg" style="width: 110px;height: 51px;display: block;">
					<div class="recommendInfo-title">浪漫海岸旅游度假区</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/stop/1526bb9d4e0b7d9a41359975f43e76c2.jpg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">潘茂名纪念公园</div>
				</div>
			</div>
		</div>
		
		<!-- 美食推荐 -->
		<div class="comClass">
			<h4 class="comTitle">美食</h4>
			<img src="../assets/food/4e58bf316a9213d190404df19e4ce055.jpeg" style="width: 345px;height: 160px;margin-bottom: 8px;display: block;">
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/food/9c8579f895cc83f357b2b0b572f3fbab.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">水东鸭粥</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/food/23122094ea6644b4456275eb5928b122.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">电城鱼炸</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/food/98ff01f62951c44e11c345541bd722c6.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">“海马”瑶柱粥</div>
				</div>
			</div>
		</div>
		
		<!-- 推荐酒店 -->
		<div class="comClass">
			<h4 class="comTitle">酒店</h4>
			<img src="../assets/hotel/402ef9f15571ed8eb1ba18c4016efb00.jpeg" style="width: 345px;height: 160px;margin-bottom: 8px;display: block;">
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/hotel/927cee0359fee681f70a90d8f60abe58.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">茂名御水古温泉酒店</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/hotel/dd8b4482528b1069de009ad27d239bf4.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">浪漫海岸温德姆酒店</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/hotel/f3b3ba58bbad391945704ced333b7685.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">茂名君怡酒店</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
</script>

<style>
	.comClass{
		margin: 30px 0;
	}
	.comTitle{
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1F2927;
		line-height: 25px;
		text-align: left;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.recommendInfoBox{
		display: flex;
	}
	.recommendInfo{
		display: flex;
		width: 33%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.recommendInfo-title{
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1F2927;
		line-height: 17px;
	}
</style>
